// components/QRCode.tsx
import React, { useEffect, useRef } from 'react'
import QRCode from 'qrcode'

interface QRCodeProps {
  value: string // 要编码的内容，如 URL、文本等
  size?: number // 二维码尺寸，默认 180px
}

const QRCodeComponent: React.FC<QRCodeProps> = ({ value, size = 180 }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    if (!canvasRef.current) return

    // 使用 qrcode.toCanvas 生成二维码
    QRCode.toCanvas(canvasRef.current, value, { width: size }, (error) => {
      if (error) {
        console.error('生成二维码失败:', error)
      }
    })
  }, [value, size])

  return <canvas ref={canvasRef} width={size} height={size} />
}

export default QRCodeComponent
